<template>
  <el-dialog
    v-model="visible"
    title="求助详情"
    width="600px"
    @close="handleClose"
  >
    <div class="dialog-content">
      <!-- 当 visible 为 true 但 detailData 为空时显示加载状态 -->
      <div v-if="visible && !detailData" class="loading-container">
        <el-skeleton animated>
          <template #template>
            <el-skeleton-item variant="p" style="width: 30%" />
            <el-skeleton-item variant="text" style="width: 70%" />
            <el-skeleton-item variant="p" style="width: 30%" />
            <el-skeleton-item variant="text" style="width: 70%" />
            <el-skeleton-item variant="p" style="width: 30%" />
            <el-skeleton-item variant="text" style="width: 70%" />
          </template>
        </el-skeleton>
      </div>
      
      <!-- 当有数据时显示表单内容 -->
      <el-form
        v-else-if="visible && detailData"
        label-width="120px"
        label-position="left"
        class="record-detail-form"
      >
        <div class="detail-table">
          <div class="detail-row">
            <div class="detail-label">用户名称：</div>
            <div class="detail-value">{{ detailData.userInfo?.newName || '-' }}</div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">手机号：</div>
            <div class="detail-value">{{ detailData.userInfo?.newPhone || '-' }}</div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">求助时间：</div>
            <div class="detail-value">{{ formatRecordTime(detailData.recordTime) || '-' }}</div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">小区名称：</div>
            <div class="detail-value">{{ detailData.areaInfo?.areaName || '-' }}</div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">员工姓名：</div>
            <div class="detail-value">{{ detailData.employeeInfo?.employeeName || '-' }}</div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">员工电话：</div>
            <div class="detail-value">{{ detailData.employeeInfo?.employeePhone || '-' }}</div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">解决状态：</div>
            <div class="detail-value">
              <dict-tag
                v-if="detailData.recordSolveStatus !== undefined && detailData.recordSolveStatus !== null"
                dict-type="10210"
                :value="detailData.recordSolveStatus"
              />
              <span v-else>-</span>
            </div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">评价状态：</div>
            <div class="detail-value">
              <dict-tag
                v-if="detailData.recordScoreStatus !== undefined && detailData.recordScoreStatus !== null"
                dict-type="10200"
                :value="detailData.recordScoreStatus"
              />
              <span v-else>-</span>
            </div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">求助内容：</div>
            <div class="detail-value">{{ detailData.recordContent || '-' }}</div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">解决内容：</div>
            <div class="detail-value">{{ detailData.recordSolveContent || '-' }}</div>
          </div>
        </div>
      </el-form>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { DictTag } from '@/components/core/dics/index.vue'
import type { RecordUserAreaHelpVo } from '@/api/types'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  detailData: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = ref(false)

// 监听 props.modelValue 的变化，并同步到 visible
watch(
  () => props.modelValue,
  (val) => {
    visible.value = val
  },
  { immediate: true }
)

// 当 visible 变化时，确保同步回父组件
watch(
  visible,
  (val) => {
    emit('update:modelValue', val)
  }
)

const handleClose = () => {
  visible.value = false
}

const formatRecordTime = (recordTime: any) => {
  if (!recordTime) return '-'
  
  // 时间格式化
  if (typeof recordTime === 'number' || /^\d{14}$/.test(recordTime.toString())) {
    const timeStr = recordTime.toString()
    const year = timeStr.substring(0, 4)
    const month = timeStr.substring(4, 6)
    const day = timeStr.substring(6, 8)
    const hour = timeStr.substring(8, 10)
    const minute = timeStr.substring(10, 12)
    const second = timeStr.substring(12, 14)
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`
  }
}
</script>

<style scoped lang="scss">
.record-detail-form {
  padding-right: 20px;
}

.detail-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.detail-row {
  display: table-row;
}

.detail-label {
  display: table-cell;
  font-weight: bold;
  width: 120px;
  padding: 12px 10px 12px 15px;
  vertical-align: top;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
}

.detail-value {
  display: table-cell;
  padding: 12px 15px;
  vertical-align: top;
  border-bottom: 1px solid #ebeef5;
}

.detail-row:last-child .detail-label,
.detail-row:last-child .detail-value {
  border-bottom: none;
}

.loading-container {
  padding: 20px 0;
}
</style>